<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head> 
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Icon boxes"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-2 py-md-4">
                        <div class="border-bottom">
                            <h1>Icon Boxes</h1>
                            <p class="lead text-dark">Icon Boxes are a great addition to pages for listing key unique selling points, or to highlight your website’s main areas of content. They can be used to draw attention to important facts, moments, add contact dates, information,
                                and anything else you think of.</p>
                        </div>
                        <div id="example" class="my-5">
                            <h5 class="mb-3">Example</h5>
                            <p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <div class="col-md-4">
                                                    <!-- Icon Boxes -->
                                                    <div class="icon-box">
                                                        <div class="icon icon-primary mb-4">
                                                            <i class="far fa-lightbulb"></i>
                                                        </div>
                                                        <h5 class="icon-box-title">Ideas and Concepts</h5>
                                                        <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                        <a href="#" class="btn btn-link text-dark">Learn more</a>
                                                    </div>
                                                    <!-- End of Icon Boxes -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box&quot;&gt;
    &lt;div class=&quot;icon icon-primary mb-4&quot;&gt;
        &lt;i class=&quot;far fa-lightbulb&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;h5 class=&quot;icon-box-title&quot;&gt;Ideas and Concepts&lt;/h5&gt;
    &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="text-alignment" class="my-5">
                            <h5 class="mb-3">Text alignment</h5>
                            <p>Easily realign Icon Boxes text with <code class="text-danger">.text-left</code>, <code class="text-danger">.text-center</code> and <code class="text-danger">.text-right</code> classes.
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box">
                                                            <div class="icon icon-primary mb-4">
                                                                <i class="far fa-lightbulb"></i>
                                                            </div>
                                                            <h5 class="icon-box-title">Ideas and Concepts</h5>
                                                            <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                            <a href="#" class="btn btn-link text-dark">Learn more</a>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box text-center">
                                                            <div class="icon icon-secondary mb-4">
                                                                <i class="far fa-hand-point-right"></i>
                                                            </div>
                                                            <h5 class="icon-box-title">Powerful Techniques</h5>
                                                            <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                            <a href="#" class="btn btn-link text-dark">Learn more</a>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box text-right">
                                                            <div class="icon icon-tertiary mb-4">
                                                                <i class="far fa-user"></i>
                                                            </div>
                                                            <h5 class="icon-box-title">100% Satisfaction</h5>
                                                            <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                            <a href="#" class="btn btn-link text-dark">Learn more</a>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box&quot;&gt;
    &lt;div class=&quot;icon icon-primary mb-4&quot;&gt;
        &lt;i class=&quot;far fa-lightbulb&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;h5 class=&quot;icon-box-title&quot;&gt;Ideas and Concepts&lt;/h5&gt;
    &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;
&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box text-center&quot;&gt;
    &lt;div class=&quot;icon icon-secondary mb-4&quot;&gt;
        &lt;i class=&quot;far fa-hand-point-right&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;h5 class=&quot;icon-box-title&quot;&gt;Powerful Techniques&lt;/h5&gt;
    &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;                                                           
 &lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box text-right&quot;&gt;
    &lt;div class=&quot;icon icon-tertiary mb-4&quot;&gt;
        &lt;i class=&quot;far fa-user&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;h5 class=&quot;icon-box-title&quot;&gt;100% Satisfaction&lt;/h5&gt;
    &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;

                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="side-icons" class="my-5">
                            <h5 class="mb-3">Side icons</h5>
                            <p>You can put the icon to the right or left of the text with <a href="https://getbootstrap.com/docs/4.3/utilities/flex/">Flexbox</a></p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-9" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-17" data-toggle="tab" href="#tab-content-17" role="tab" aria-controls="tab-link-17" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-18" data-toggle="tab" href="#tab-content-18" role="tab" aria-controls="tab-link-18" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent9">
                                            <div class="tab-pane fade show active" id="tab-content-17" role="tabpanel" aria-labelledby="tab-content-17">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box">
                                                            <div class="d-flex px-3">
                                                                <div>
                                                                    <div class="icon icon-secondary mb-5">
                                                                        <i class="fas fa-chess-rook"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="pl-4">
                                                                    <h6 class="icon-box-title">Ideas and Concepts</h6>
                                                                    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.
                                                                    </p>
                                                                    <a href="#" class="btn btn-link text-dark">Read
                                                                        more</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-6">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box text-right">
                                                            <div class="d-flex px-3">
                                                                <div class="pr-4">
                                                                    <h6 class="icon-box-title">Ideas and Concepts</h6>
                                                                    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.
                                                                    </p>
                                                                    <a href="#" class="btn btn-link text-dark">Read
                                                                        more</a>
                                                                </div>
                                                                <div>
                                                                    <div class="icon icon-secondary mb-5">
                                                                        <i class="far fa-lightbulb"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-18" role="tabpanel" aria-labelledby="tab-content-18">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Link&lt;/a&gt;
&lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Button&lt;/button&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;button&quot; value=&quot;Input&quot;&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;reset&quot; value=&quot;Reset&quot;&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="sizes" class="my-5">
                            <h5 class="mb-3">Sizes</h5>
                            <p>Fancy larger or smaller icons? Add <code class="text-danger">.icon-lg</code> or <code class="text-danger">.icon-sm</code> for additional sizes.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-5" data-toggle="tab" href="#tab-content-5" role="tab" aria-controls="tab-link-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-6" data-toggle="tab" href="#tab-content-6" role="tab" aria-controls="tab-link-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tab-content-5" role="tabpanel" aria-labelledby="tab-content-5">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box">
                                                            <div class="icon icon-shape icon-lg icon-shape-tertiary mb-4">
                                                                <i class="fas fa-globe-europe"></i>
                                                            </div>
                                                            <h5 class="icon-box-title">Ideas and Concepts</h5>
                                                            <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                            <a href="#" class="btn btn-link text-dark">Learn more</a>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box text-center">
                                                            <div class="icon icon-shape icon-shape-tertiary mb-4">
                                                                <i class="fas fa-globe-europe"></i>
                                                            </div>
                                                            <h6 class="icon-box-title">Powerful Techniques</h6>
                                                            <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                            <a href="#" class="btn btn-link text-dark">Learn more</a>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box text-right">
                                                            <div class="icon icon-shape icon-sm icon-shape-tertiary mb-4">
                                                                <i class="fas fa-globe-europe"></i>
                                                            </div>
                                                            <h6 class="icon-box-title">100% Satisfaction</h6>
                                                            <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                            <a href="#" class="btn btn-link text-dark">Learn more</a>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-6" role="tabpanel" aria-labelledby="tab-content-6">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box&quot;&gt;
    &lt;div class=&quot;icon icon-shape icon-lg icon-shape-secondary mb-4&quot;&gt;
        &lt;i class=&quot;fas fa-globe-europe&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;h5 class=&quot;icon-box-title&quot;&gt;Ideas and Concepts&lt;/h5&gt;
    &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;

&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box text-center&quot;&gt;
    &lt;div class=&quot;icon icon-shape icon-shape-secondary mb-4&quot;&gt;
        &lt;i class=&quot;fas fa-globe-europe&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;h6 class=&quot;icon-box-title&quot;&gt;Powerful Techniques&lt;/h6&gt;
    &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;

&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box text-right&quot;&gt;
    &lt;div class=&quot;icon icon-shape icon-sm icon-shape-secondary mb-4&quot;&gt;
        &lt;i class=&quot;fas fa-globe-europe&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;h6 class=&quot;icon-box-title&quot;&gt;100% Satisfaction&lt;/h6&gt;
    &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="shapes" class="my-5">
                            <h5 class="mb-3">Shapes</h5>
                            <p>Use <code class="text-danger">.icon-shape</code> for square shape and <code class="text-danger">.rounded-circle</code>,
                                <code class="text-danger">.organic-radius</code> classes to create awesome icons.</p>
                            <p>Also you can add <code class="text-danger">svg</code> to your icon shape.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-4" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-7" data-toggle="tab" href="#tab-content-7" role="tab" aria-controls="tab-link-7" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-8" data-toggle="tab" href="#tab-content-8" role="tab" aria-controls="tab-link-8" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent4">
                                            <div class="tab-pane fade show active" id="tab-content-7" role="tabpanel" aria-labelledby="tab-content-7">
                                                <div class="icon icon-shape icon-shape-primary mr-4">
                                                    <i class="fas fa-fire-alt"></i>
                                                </div>
                                                <div class="icon icon-shape icon-shape-secondary rounded-circle mr-4">
                                                    <i class="fas fa-bomb"></i>
                                                </div>
                                                <div class="icon icon-shape icon-shape-tertiary organic-radius mr-4">
                                                    <div class="z-2"><i class="fas fa-cubes"></i></div>
                                                </div>
                                                <div class="icon icon-danger">
                                                    <div class="organic-shape scale-1">
                                                        <svg class="organic-shape-danger" width="90" height="90" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                                                            <g transform="translate(300,300)">
                                                                <path d="M115.7,-146.8C141.8,-115.9,149.2,-71.8,157.7,-27.3C166.2,17.3,175.7,62.1,166.4,112.8C157.1,163.4,128.8,219.8,90.1,223.5C51.4,227.1,2.3,177.9,-45.8,150C-93.9,122,-140.9,115.2,-152.3,90.4C-163.7,65.6,-139.5,22.6,-125.9,-16.7C-112.4,-55.9,-109.5,-91.5,-90.3,-123.7C-71.1,-155.8,-35.6,-184.4,4.6,-189.9C44.8,-195.4,89.6,-177.7,115.7,-146.8Z" />
                                                            </g>
                                                        </svg>
                                                    </div>
                                                    <div class="z-2"><i class="fas fa-fingerprint"></i></div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-8" role="tabpanel" aria-labelledby="tab-content-8">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;div class=&quot;icon icon-shape icon-shape-primary&quot;&gt;
    &lt;i class=&quot;fas fa-fire-alt&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;icon icon-shape icon-shape-secondary rounded-circle&quot;&gt;
    &lt;i class=&quot;fas fa-bomb&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;icon icon-shape icon-shape-tertiary organic-radius&quot;&gt;
    &lt;div class=&quot;z-2&quot;&gt;&lt;i class=&quot;fas fa-cubes&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;icon icon-danger&quot;&gt;
    &lt;div class=&quot;organic-shape scale-1&quot;&gt;
        &lt;svg class=&quot;organic-shape-danger&quot; width=&quot;90&quot; height=&quot;90&quot; viewBox=&quot;0 0 600 600&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
            &lt;g transform=&quot;translate(300,300)&quot;&gt;
                &lt;path d=&quot;M115.7,-146.8C141.8,-115.9,149.2,-71.8,157.7,-27.3C166.2,17.3,175.7,62.1,166.4,112.8C157.1,163.4,128.8,219.8,90.1,223.5C51.4,227.1,2.3,177.9,-45.8,150C-93.9,122,-140.9,115.2,-152.3,90.4C-163.7,65.6,-139.5,22.6,-125.9,-16.7C-112.4,-55.9,-109.5,-91.5,-90.3,-123.7C-71.1,-155.8,-35.6,-184.4,4.6,-189.9C44.8,-195.4,89.6,-177.7,115.7,-146.8Z&quot; /&gt;
            &lt;/g&gt;
        &lt;/svg&gt;   
    &lt;/div&gt;
    &lt;div class=&quot;z-2&quot;&gt;&lt;i class=&quot;fas fa-fingerprint&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="image-shapes" class="my-5">
                            <h5 class="mb-3">Image as a shape</h5>
                            <p>You can now use your own images to be used as the background of either of these shapes.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-5" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-9" data-toggle="tab" href="#tab-content-9" role="tab" aria-controls="tab-link-9" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-10" data-toggle="tab" href="#tab-content-10" role="tab" aria-controls="tab-link-10" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent5">
                                            <div class="tab-pane fade show active" id="tab-content-9" role="tabpanel" aria-labelledby="tab-content-9">
                                                <div class="icon image-shape icon-white mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <i class="fas fa-brain"></i>
                                                </div>
                                                <div class="icon image-shape icon-white rounded-circle mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <i class="fas fa-bomb"></i>
                                                </div>
                                                <div class="icon image-shape icon-white organic-radius mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <i class="fas fa-meteor"></i>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-10" role="tabpanel" aria-labelledby="tab-content-10">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;div class=&quot;icon image-shape icon-white mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;i class=&quot;fas fa-brain&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;icon image-shape icon-white rounded-circle mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;i class=&quot;fas fa-bomb&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;icon image-shape icon-white organic-radius mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;i class=&quot;fas fa-meteor&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="parallax-image" class="my-5">
                            <h5 class="mb-3">Parallax image as a shape</h5>
                            <p>Use your own images as the parallax-background of either of these shapes.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-6" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-11" data-toggle="tab" href="#tab-content-11" role="tab" aria-controls="tab-link-11" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-12" data-toggle="tab" href="#tab-content-12" role="tab" aria-controls="tab-link-12" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent6">
                                            <div class="tab-pane fade show active" id="tab-content-11" role="tabpanel" aria-labelledby="tab-content-11">
                                                <div class="icon image-shape icon-white icon-parallax jarallax mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <i class="fas fa-mountain"></i>
                                                </div>
                                                <div class="icon image-shape rounded-circle icon-white icon-parallax jarallax mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <i class="fas fa-bomb"></i>
                                                </div>
                                                <div class="icon image-shape organic-radius icon-white icon-parallax jarallax mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <i class="fab fa-centercode"></i>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-12" role="tabpanel" aria-labelledby="tab-content-12">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;div class=&quot;icon image-shape icon-white icon-parallax jarallax mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;i class=&quot;fas fa-mountain&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;icon image-shape rounded-circle icon-white icon-parallax jarallax mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;i class=&quot;fas fa-bomb&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;icon image-shape organic-radius icon-white icon-parallax jarallax mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;i class=&quot;fab fa-centercode&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="bordered" class="my-5">
                            <h5 class="mb-3">Bordered</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-7" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-13" data-toggle="tab" href="#tab-content-13" role="tab" aria-controls="tab-link-13" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-14" data-toggle="tab" href="#tab-content-14" role="tab" aria-controls="tab-link-14" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent7">
                                            <div class="tab-pane fade show active" id="tab-content-13" role="tabpanel" aria-labelledby="tab-content-13">
                                                <div class="icon image-shape icon-secondary mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <span class="icon-bordered bg-white"><i class="fas fa-award"></i></span>
                                                </div>
                                                <div class="icon image-shape icon-info rounded-circle mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <span class="icon-bordered bg-white"><i class="fab fa-fly"></i></span>
                                                </div>
                                                <div class="icon image-shape icon-danger organic-radius mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                    <span class="icon-bordered bg-white"><i class="far fa-lightbulb"></i></span>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-14" role="tabpanel" aria-labelledby="tab-content-14">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;div class=&quot;icon image-shape icon-secondary mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;span class=&quot;icon-bordered&quot;&gt;&lt;i class=&quot;fas fa-award&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;icon image-shape icon-info rounded-circle mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;span class=&quot;icon-bordered&quot;&gt;&lt;i class=&quot;fab fa-fly&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;icon image-shape icon-danger organic-radius mr-4&quot; data-background=&quot;../../assets/img/icon-box/icon-image-3.jpg&quot;&gt;
    &lt;span class=&quot;icon-bordered&quot;&gt;&lt;i class=&quot;far fa-lightbulb&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;/div&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="cards" class="my-5">
                            <h5 class="mb-3">Cards</h5>
                            <p>You can use also cards with icons and some text.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-8" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-15" data-toggle="tab" href="#tab-content-15" role="tab" aria-controls="tab-link-15" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-16" data-toggle="tab" href="#tab-content-16" role="tab" aria-controls="tab-link-16" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent8">
                                            <div class="tab-pane fade show active" id="tab-content-15" role="tabpanel" aria-labelledby="tab-content-15">
                                                <div class="row">
                                                    <div class="col-md-6 col-lg-4">
                                                        <!-- Icon box -->
                                                        <div class="card shadow-soft border-light mb-4 mb-lg-0">
                                                            <div class="card-body p-4 p-xl-5">
                                                                <div class="icon icon-shape icon-shape-primary rounded-circle">
                                                                    <i class="far fa-lightbulb"></i>
                                                                </div>
                                                                <h5 class="my-3">Ideas and Concepts</h5>
                                                                <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
                                                                <a href="#" class="btn btn-sm btn-primary animate-up-1">Read
                                                                    more</a>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon box -->
                                                    </div>
                                                    <div class="col-md-6 col-lg-4">
                                                        <!-- Icon box -->
                                                        <div class="card shadow-soft border-light text-center mb-4 mb-lg-0">
                                                            <div class="card-body p-4 p-xl-5">
                                                                <div class="icon icon-shape icon-shape-secondary rounded-circle">
                                                                    <i class="fas fa-bong"></i>
                                                                </div>
                                                                <h5 class="my-3">Powerful Techniques</h5>
                                                                <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
                                                                <a href="#" class="btn btn-sm btn-secondary animate-up-1">Read
                                                                    more</a>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon box -->
                                                    </div>
                                                    <div class="col-md-6 col-lg-4">
                                                        <!-- Icon box -->
                                                        <div class="card shadow-soft border-light text-right mb-4 mb-lg-0">
                                                            <div class="card-body p-4 p-xl-5">
                                                                <div class="icon icon-shape icon-shape-tertiary rounded-circle">
                                                                    <i class="fas fa-camera-retro"></i>
                                                                </div>
                                                                <h5 class="my-3">100% Satisfaction</h5>
                                                                <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
                                                                <a href="#" class="btn btn-sm btn-tertiary animate-up-1">Read
                                                                    more</a>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon box -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-16" role="tabpanel" aria-labelledby="tab-content-16">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Icon box --&gt;
&lt;div class=&quot;card shadow-soft border-light mb-4 mb-lg-0&quot;&gt;
    &lt;div class=&quot;card-body p-4 p-xl-5&quot;&gt;
        &lt;div class=&quot;icon icon-shape icon-shape-primary rounded-circle&quot;&gt;
            &lt;i class=&quot;far fa-lightbulb&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;h5 class=&quot;my-3&quot;&gt;Ideas and Concepts&lt;/h5&gt;
        &lt;p&gt;Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.&lt;/p&gt;
        &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary animate-up-1&quot;&gt;Learn more&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Icon box --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="cards-2" class="my-5">
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-10" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-19" data-toggle="tab" href="#tab-content-19" role="tab" aria-controls="tab-link-19" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-20" data-toggle="tab" href="#tab-content-20" role="tab" aria-controls="tab-link-20" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent10">
                                            <div class="tab-pane fade show active" id="tab-content-19" role="tabpanel" aria-labelledby="tab-content-19">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <!-- Icon Box -->
                                                        <div class="card shadow-soft border-light text-left mb-4 mb-md-0">
                                                            <div class="card-body p-4 p-sm-5">
                                                                <div class="d-flex px-3">
                                                                    <div>
                                                                        <div class="icon icon-tertiary">
                                                                            <i class="far fa-grin-stars"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="pl-3 pl-sm-4">
                                                                        <h5>100% Satisfaction</h5>
                                                                        <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
                                                                        <a href="#" class="btn btn-link text-tertiary btn-icon">
                                                                            <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                                                                            <span class="btn-inner-text font-weight-bold">Read
                                                                                More</span>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Box -->
                                                    </div>
                                                    <div class="col-md-6">
                                                        <!-- Icon Box -->
                                                        <div class="card shadow-soft border-light text-right mb-4 mb-md-0">
                                                            <div class="card-body p-4 p-sm-5">
                                                                <div class="d-flex px-3">
                                                                    <div class="pr-3 pr-sm-4">
                                                                        <h5>100% Satisfaction</h5>
                                                                        <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
                                                                        <a href="#" class="btn btn-link text-secondary btn-icon">
                                                                            <span class="btn-inner-text font-weight-bold">Read
                                                                                More</span>
                                                                            <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                                                                        </a>
                                                                    </div>
                                                                    <div>
                                                                        <div class="icon icon-secondary">
                                                                            <i class="far fa-grimace"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Box -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-20" role="tabpanel" aria-labelledby="tab-content-20">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Icon Box --&gt;
&lt;div class=&quot;card shadow-soft border-light text-left mb-4 mb-md-0&quot;&gt;
    &lt;div class=&quot;card-body p-4 p-sm-5&quot;&gt;
        &lt;div class=&quot;d-flex px-3&quot;&gt;
            &lt;div&gt;
                &lt;div class=&quot;icon icon-tertiary&quot;&gt;
                    &lt;i class=&quot;far fa-grin-stars&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;pl-3 pl-sm-4&quot;&gt;  
                &lt;h5&gt;100% Satisfaction&lt;/h5&gt;
                &lt;p&gt;Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.&lt;/p&gt;
                &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-tertiary btn-icon&quot;&gt;
                    &lt;span class=&quot;btn-inner-icon&quot;&gt;&lt;i class=&quot;fas fa-link&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                    &lt;span class=&quot;btn-inner-text font-weight-bold&quot;&gt;Learn more&lt;/span&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Icon Box --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="big-image" class="my-5">
                            <h5 class="mb-3">Icon Boxes with image background</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-11" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-21" data-toggle="tab" href="#tab-content-21" role="tab" aria-controls="tab-link-21" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-22" data-toggle="tab" href="#tab-content-22" role="tab" aria-controls="tab-link-22" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent11">
                                            <div class="tab-pane fade show active" id="tab-content-21" role="tabpanel" aria-labelledby="tab-content-21">
                                                <!--End of Title-->
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box image-box overlay-dark rounded text-white p-5" data-background="../../assets/img/icon-box/icon-image-2.jpg">
                                                            <div class="icon-box-body">
                                                                <div class="icon icon-shape icon-shape-white rounded-circle mb-4">
                                                                    <i class="far fa-lightbulb"></i>
                                                                </div>
                                                                <h6 class="icon-box-title text-white">Ideas and Concepts
                                                                </h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <button type="button" class="btn btn-sm btn-outline-white">Primary</button>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box image-box overlay-dark rounded text-white text-center p-5" data-background="../../assets/img/icon-box/icon-image-2.jpg">
                                                            <div class="icon-box-body">
                                                                <div class="icon icon-shape icon-shape-white rounded-circle mb-4">
                                                                    <i class="fas fa-feather-alt"></i>
                                                                </div>
                                                                <h6 class="icon-box-title text-white">Ideas and Concepts
                                                                </h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <button type="button" class="btn btn-sm btn-outline-white">Primary</button>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box image-box overlay-dark rounded text-white text-right p-5" data-background="../../assets/img/icon-box/icon-image-2.jpg">
                                                            <div class="icon-box-body">
                                                                <div class="icon icon-shape icon-shape-white rounded-circle mb-4">
                                                                    <i class="fas fa-globe-europe"></i>
                                                                </div>
                                                                <h6 class="icon-box-title text-white">Ideas and Concepts
                                                                </h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <button type="button" class="btn btn-sm btn-outline-white">Primary</button>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-22" role="tabpanel" aria-labelledby="tab-content-22">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box image-box overlay-dark rounded text-white p-5&quot; data-background=&quot;../../assets/img/icon-box/icon-image-2.jpg&quot;&gt;
    &lt;div class=&quot;icon-box-body&quot;&gt;
        &lt;div class=&quot;icon icon-shape icon-shape-white rounded-circle mb-4&quot;&gt;
            &lt;i class=&quot;far fa-lightbulb&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;h6 class=&quot;icon-box-title text-white&quot;&gt;Ideas and Concepts&lt;/h6&gt;
        &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-white&quot;&gt;Primary&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="big-image-parallax" class="my-5">
                            <h5 class="mb-3">Icon Boxes with parallax image</h5>
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-12" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-23" data-toggle="tab" href="#tab-content-23" role="tab" aria-controls="tab-link-23" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-24" data-toggle="tab" href="#tab-content-24" role="tab" aria-controls="tab-link-24" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent12">
                                            <div class="tab-pane fade show active" id="tab-content-23" role="tabpanel" aria-labelledby="tab-content-23">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box overlay-dark big-parallax rounded jarallax text-white p-5" data-background="../../assets/img/icon-box/icon-image-2.jpg">
                                                            <div class="icon-box-body">
                                                                <div class="icon icon-shape icon-shape-white rounded-circle mb-4">
                                                                    <i class="far fa-lightbulb"></i>
                                                                </div>
                                                                <h6 class="icon-box-title text-white">Ideas and Concepts
                                                                </h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <button type="button" class="btn btn-sm btn-outline-white">Primary</button>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box overlay-dark big-parallax rounded jarallax text-white text-center p-5" data-background="../../assets/img/icon-box/icon-image-2.jpg">
                                                            <div class="icon-box-body">
                                                                <div class="icon icon-shape icon-shape-white rounded-circle mb-4">
                                                                    <i class="fas fa-feather-alt"></i>
                                                                </div>
                                                                <h6 class="icon-box-title text-white">Ideas and Concepts
                                                                </h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <button type="button" class="btn btn-sm btn-outline-white">Primary</button>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box overlay-dark big-parallax rounded jarallax text-white text-right p-5" data-background="../../assets/img/icon-box/icon-image-2.jpg">
                                                            <div class="icon-box-body">
                                                                <div class="icon icon-shape icon-shape-white rounded-circle mb-4">
                                                                    <i class="fas fa-globe-europe"></i>
                                                                </div>
                                                                <h6 class="icon-box-title text-white">Ideas and Concepts
                                                                </h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <button type="button" class="btn btn-sm btn-outline-white">Primary</button>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-24" role="tabpanel" aria-labelledby="tab-content-24">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box overlay-dark big-parallax rounded jarallax text-white p-5&quot; data-background=&quot;../../assets/img/icon-box/icon-image-2.jpg&quot;&gt;
    &lt;div class=&quot;icon-box-body&quot;&gt;
        &lt;div class=&quot;icon icon-shape icon-shape-white rounded-circle mb-4&quot;&gt;
            &lt;i class=&quot;far fa-lightbulb&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;h6 class=&quot;icon-box-title text-white&quot;&gt;Ideas and Concepts&lt;/h6&gt;
        &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-white&quot;&gt;Primary&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="border-image" class="my-5">
                            <h5 class="mb-3">Icon Boxes with border image</h5>
                            <p>Make buttons look inactive by adding the <code class="text-danger">disabled</code> boolean attribute to any <code class="text-danger">&lt;button&gt;</code> element.</p>
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-13" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-25" data-toggle="tab" href="#tab-content-25" role="tab" aria-controls="tab-link-25" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-26" data-toggle="tab" href="#tab-content-26" role="tab" aria-controls="tab-link-26" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent13">
                                            <div class="tab-pane fade show active" id="tab-content-25" role="tabpanel" aria-labelledby="tab-content-25">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box image-box rounded p-2" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                            <div class="icon-box-body bg-white rounded p-5">
                                                                <div class="icon icon-primary mb-4">
                                                                    <i class="fas fa-fingerprint"></i>
                                                                </div>
                                                                <h6 class="icon-box-title">Ideas and Concepts</h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <a href="#" class="btn btn-link text-primary btn-icon">
                                                                    <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                                                                    <span class="btn-inner-text">Learn more</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box image-box rounded p-2" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                            <div class="icon-box-body bg-white rounded p-5">
                                                                <div class="icon icon-secondary mb-4">
                                                                    <i class="fab fa-fly"></i>
                                                                </div>
                                                                <h6 class="icon-box-title">Powerful Techniques</h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <a href="#" class="btn btn-link text-secondary btn-icon">
                                                                    <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                                                                    <span class="btn-inner-text">Learn more</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Icon Boxes -->
                                                        <div class="icon-box image-box rounded p-2" data-background="../../assets/img/icon-box/icon-image-3.jpg">
                                                            <div class="icon-box-body bg-white rounded p-5">
                                                                <div class="icon icon-tertiary mb-4">
                                                                    <i class="fas fa-fire-alt"></i>
                                                                </div>
                                                                <h6 class="icon-box-title">100% Satisfaction</h6>
                                                                <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
                                                                <a href="#" class="btn btn-link text-tertiary btn-icon">
                                                                    <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                                                                    <span class="btn-inner-text">Learn more</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <!-- End of Icon Boxes -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-26" role="tabpanel" aria-labelledby="tab-content-26">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Icon Boxes --&gt;
&lt;div class=&quot;icon-box image-box rounded p-2&quot; data-background=&quot;../../assets/img/icon-box/icon-image-1.jpg&quot;&gt;
    &lt;div class=&quot;icon-box-body rounded p-5&quot;&gt;
        &lt;div class=&quot;icon icon-primary mb-4&quot;&gt;
            &lt;i class=&quot;fas fa-fingerprint&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;h6 class=&quot;icon-box-title&quot;&gt;Ideas and Concepts&lt;/h6&gt;
        &lt;p class=&quot;icon-box-text&quot;&gt;We work to figure out ways to help your business grow through all platforms.&lt;/p&gt;
        &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-primary btn-icon&quot;&gt;
            &lt;span class=&quot;btn-inner-icon&quot;&gt;&lt;i class=&quot;fas fa-link&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;span class=&quot;btn-inner-text&quot;&gt;Learn more&lt;/span&gt;
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Icon Boxes --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#example" class="nav-link" data-smooth-scroll>Example</a>
                            </li>
                            <li class="nav-item">
                                <a href="#text-alignment" class="nav-link " data-smooth-scroll>Text alignment</a>
                            </li>
                            <li class="nav-item">
                                <a href="#side-icons" class="nav-link " data-smooth-scroll>Side icons</a>
                            </li>
                            <li class="nav-item">
                                <a href="#sizes" class="nav-link " data-smooth-scroll>Choose your side</a>
                            </li>
                            <li class="nav-item">
                                <a href="#shapes" class="nav-link " data-smooth-scroll>Shapes</a>
                            </li>
                            <li class="nav-item">
                                <a href="#image-shapes" class="nav-link " data-smooth-scroll>Image shapes</a>
                            </li>
                            <li class="nav-item">
                                <a href="#parallax-image" class="nav-link " data-smooth-scroll>Parallax image</a>
                            </li>
                            <li class="nav-item">
                                <a href="#bordered" class="nav-link " data-smooth-scroll>Bordered</a>
                            </li>
                            <li class="nav-item">
                                <a href="#cards" class="nav-link " data-smooth-scroll>Cards</a>
                            </li>
                            <li class="nav-item">
                                <a href="#big-image" class="nav-link " data-smooth-scroll>Big image</a>
                            </li>
                            <li class="nav-item">
                                <a href="#big-image-parallax" class="nav-link " data-smooth-scroll>Parallax image</a>
                            </li>
                            <li class="nav-item">
                                <a href="#border-image" class="nav-link " data-smooth-scroll>Bordered big</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>